<template>
	<el-container style="height: 100vh; border: 1px solid #eee">
		<el-aside :width="asideW" style="background-color: rgb(238, 241, 246);height: 100%;box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
			<Aside :isCollspan="isCollspan" :myTitle="myTitle"></Aside>
		</el-aside>
		<el-container>
			<el-header>
				<Header :collspanBtnClass="collspanBtnClass"
				 @changeAside="collspanBtn"></Header>
			</el-header>
			<el-main>
				<!-- 路由显示区域 -->
				<el-breadcrumb v-if="this.$router.currentRoute.path!='/main'">
				  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				  <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
				   <el-divider></el-divider>
				</el-breadcrumb>
				<div v-if="this.$router.currentRoute.path=='/main'">
					<h1>欢迎登录erp后台管理系统</h1>
				</div>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>
<script>
	import Aside from '@/components/Aside.vue'
	import Header from '@/components/Header.vue'
	export default {
		data() {
			return {
				collspanBtnClass: 'el-icon-s-fold',
				//展开或者收起
				isCollspan: false,
				asideW: "200px",
				myTitle: true
			}
		},
		components: {
			Aside,
			Header
		},
		methods: {
			collspanBtn() {
				this.isCollspan = !this.isCollspan;
				if (this.isCollspan) {
					this.asideW = "64px";
					this.collspanBtnClass = 'el-icon-s-unfold',
					this.myTitle = false;
				} else {
					this.asideW = "200px";
					this.collspanBtnClass = 'el-icon-s-fold',
					this.myTitle = true;
				}
			}
		}
	};
</script>
<style>
	.tableRowBack {
		background-color: red;
	}
</style>
